<template>
	<view class="divBox">
		<QHzujian></QHzujian>
		<KNyue></KNyue>
		<view class="topUp">

			<view class="topUpPre">
				<text>在线充值</text>
			</view>

			<view class="topUpIn">
				<view :class="{active:v.isactive}" class="topUpIns" v-for="(v,index) in topUpData" :key="v.val"
					@click="set(v,index)">
					{{v.val}}
				</view>
			</view>
			<view class="topUpNext">
				<text @click="goChargeUp">充值记录</text>
				<view class="skype" @click="qurenCZ">确认充值</view>
			</view>
		</view>
	</view>
	<jzTankuang v-show="state1" @setState='stesta'></jzTankuang>
	<view class="cover" v-show="state"></view>
</template>

<script setup>
	import jzTankuang from '~@/components/feng/jiuzhenTankuang/jiuzhenTankuang.vue'
	import QHzujian from '~@/components/feng/QHzujian/QHzujian.vue'
	import KNyue from '~@/components/feng/KNyue/KNyue.vue'
	import {
		ref,
		reactive,
		toRef
	} from 'vue'
	//遮盖层开关
	const stesta = (v) => {
		state.value = v.value
		state1.value = v.value
	}
	const state = ref(false)
	//弹框开关
	const state1 = ref(false)
	let isactive = ref(false)
	//切换就诊人
	const switchs = () => {
		state.value = ref(true)
		state1.value = ref(true)
	}
	//账单页面
	const goChargeUp = () => {
		uni.navigateTo({
			url: '/pages/home/menzhenChagre/chargeUp/chargeUp'
		})
	}
	//确认充值页面
	const qurenCZ = () => {
		uni.showToast({
			title: '加载中',
			icon: 'loading',
			duration: 2000,
			success: function() {
				setTimeout(function() {
					uni.navigateTo({
						url: '/components/feng/CZyemian/CZyemian',
					})
				}, 2000);
			}
		})

	}
	const topUpData = reactive([{
		val: 50,
		isactive: false
	}, {
		val: 100,
		isactive: false
	}, {
		val: 200,
		isactive: false
	}, {
		val: 300,
		isactive: false
	}, {
		val: 500,
		isactive: false
	}, {
		val: '自定义',
		isactive: false
	}])
	//判断样式的显隐
	const set = (v, index) => {
		if (v.val === topUpData[index].val) {
			topUpData[index].isactive = ref(!v.isactive)
		}
		topUpData.forEach(item => {
			if (item.val != v.val) {
				item.isactive = ref(false)
			}
		})
	}
</script>

<style lang="scss">
	//最大的Div
	$top:16rpx;
	$btm:20rpx;

	.cover {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}


	.divBox {
		display: flex;
		flex-direction: column;
		// border: 1px solid red;
		margin: 0 36rpx;
		height: 1200rpx;



		//在线充值
		.topUp {
			margin-top: $top;
			height: 500rpx;
			// border: 1px solid red;

			// border: 1px solid red;
			//上
			.topUpPre {
				text {
					font-size: 18px;
				}
			}

			//中
			.topUpIn {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 50rpx;

				.topUpIns {
					text-align: center;
					margin-bottom: $btm;
					border-radius: 5%;
					width: 210rpx;
					line-height: 70rpx;
					height: 70rpx;
					background-color: #f2f2f2;
				}

				.active {
					background-color: #e3efff;
					border: 1px solid #006eff;
					color: #006eff;
					box-sizing: border-box;
				}
			}

			//下
			.topUpNext {
				margin-top: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				text {
					font-size: 14px;
					color: #006eff;
					margin-bottom: 100rpx;
				}

				.skype {
					text-align: center;
					width: 100%;
					height: 80rpx;
					font-size: 18px;
					color: #fff;
					line-height: 80rpx;
					border-radius: 5%;
					margin: 0 auto;
					background-color: #006eff;
				}
			}
		}
	}
</style>
